<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=BG7RU63iyGyRj3ttMtsuGeLnND5cY9yi"></script>
    <script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.139/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
    //0.获取地点坐标
    var x=[[${x}]];
    var y=[[${y}]];


    // 1. 创建地图实例
    var bmapgl = new BMapGL.Map('map_container');
    var point = new BMapGL.Point(x,y);
    bmapgl.centerAndZoom(point, 17);

    //允许鼠标滑动
    bmapgl.enableKeyboard();
    bmapgl.enableScrollWheelZoom();
    bmapgl.enableInertialDragging();
    bmapgl.enableContinuousZoom();



    // 2. 创建MapVGL图层管理器
    var view = new mapvgl.View({
        map: bmapgl
    });

    // 3. 创建可视化图层，并添加到图层管理器中
    var layer = new mapvgl.PointLayer({
        color: 'rgba(50, 50, 200, 1)',
        blend: 'lighter',
        size: 2
    });
    view.addLayer(layer);

    // 4. 准备好规范化坐标数据
    var data = [{
        geometry: {
            type: 'Point',
            coordinates: [x,y]
        }
    }];

    // 5. 关联图层与数据，享受震撼的可视化效果
    layer.setData(data);
</script>
</body>
</html>
